<template>
    <has-left-nav-layout>
        <template v-slot:leftNav>
            <div class="left-menu">
            </div>
        </template>
      
             <main-wrap >
                    <div class="coupondetail">
                        <div class="shopbox">
                                <div class="topbox">
                                    <div class="imgbox">
                                        <cutImageGoodsDetail :url='details.headImageUrl'/>
                                    </div>
                                    <div class="toptxt">
                                        <h5>{{details.shopName}}</h5>
                                        <div class="renzh">
                                            <span v-t="'shop.text6'">Authorization</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="star2">
                                    <van-rate v-model="details.indexStar" :readonly="true" allow-half size='10px' color="#CFFFFF"/>
                                </div>
            
                                <div class="shopTxt1">
                                    <div class="title" v-t="'coupons.text3'">Opening time</div>
                                    <p>{{moment(details.shopCreateTime).format('YYYY-MM-DD')}}</p>
                                </div>
                                <div class="shopTxt1">
                                    <div class="title" v-t="'coupons.text4'">ShopAddress</div>
                                    <p>{{details.shopAddress}}</p>
                                </div>
                                

                        </div>
                        <div class="right-shop-view" v-if="shopObj">
                            <div class="coupons-lq">
                                <img class="icon" src="/images/c-s.png" />
                                <div class="num">{{shopObj.couponAmount?.decimalTwoString}}</div>
                            </div>
                            <div class="maxtitle">
                                {{text1}} ${{shopObj.minAmount?.decimalTwoString}}
                            </div>
                            <div class="date">{{text2}} {{shopObj.validDate}}</div>
                            <div class="btn-view">
                                <div class="btn" @click="btnGo"></div>
                                <div class="btnr" @click="btnGo"></div>
                            </div>
                        </div>
                     </div>
            </main-wrap>
    
    </has-left-nav-layout>
</template>

<script>
import {reactive,toRefs, onMounted,getCurrentInstance,computed } from 'vue'
import { useStore } from 'vuex'
import {useRoute,useRouter} from 'vue-router'
import {Rate as vanRate} from 'vant'
import moment from 'moment'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import oneTab from '@/components/oneTab.vue';
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue';
import myTab from '@/components/myTab.vue';
import goodsList from '@/components/goodsList.vue';
import sort from '@/components/sort.vue';
import twoTab from '@/components/twoTab.vue'
import Title from '@/components/title.vue';
import myDailog from '@/components/myDailog.vue'
import cutImageGoodsDetail from '@/components/cutImageGoodsDetail.vue'
import empty from '@/components/empty.vue'
import cutBorderBox from '@/components/cutBorderBox.vue' 
import { useI18n } from 'vue-i18n'

export default {
    components:{
        mainWrap,
        oneTab,
        mySearch,
        Image,
        myTab,
        goodsList,
        sort,
        twoTab,
        Title,
        myDailog,
        cutImageGoodsDetail,
        empty,
        cutBorderBox,
        vanRate
    },
    setup(){
        const store = useStore()
        const router = useRouter()
        const route = useRoute()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
             userInfo:computed(()=>store.state.base.userInfo),
            keyword:'',
            details:'',
            shopObj:null,
            text1:t('coupons.text1'),
            text2:t('coupons.text2'),
        })

        onMounted(()=>{
            state.shopObj = JSON.parse(route.query.name)
           getDetail()
        })
        const getDetail = ()=>{
            store.dispatch('shop/get_shop_detail',{
                 shopId:state.shopObj.shopId,
                 walletAddress:state.keyword,
            }).then(res=>{
                state.details = res.data
            })
        }  
          const btnGo = ()=>{
             router.push({path:'/shop/'+state.shopObj.shopId})

        }  
        return {
            ...toRefs(state),
            getDetail,
            moment,
            btnGo
        }
    }
}
</script>

<style lang="scss" scoped>
    .coupondetail{
        box-sizing: border-box;
        display: flex;
        align-self: flex-start;
        align-items: flex-start;
        justify-content: flex-start;
        width:100%;
        .shopbox{
            width: 500px;
            padding:50px 30px;
            min-height: 400px;
            max-height:600px;
            overflow-y: scroll;
            background: url(/images/dgbg9.png) left top no-repeat;
            background-size:100% 100%;
            margin-top:80px;
            .topbox{
                flex-shrink: 0;
                text-align: center;
                .imgbox{
                    width: 120px;
                    height: 120px;
                    margin:0 auto;
                }
                .toptxt{
                    flex: 1;
                    padding: 10px 0 0 15px;
                    h5{
                        font-size: 28px;
                        padding: 0;
                        margin: 0;
                         color: #67F8FF;
                        font-family: Poppins-SemiBold, Poppins;
                        font-weight: 600;
                        line-height: normal;
                        //-webkit-background-clip: text;
                        //-webkit-text-fill-color: transparent;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .renzh{
                        margin: 8px auto;
                        overflow: hidden;
                        text-align: center;
                        span{
                            font-size: 13px;
                            font-family: Inter-Medium, Inter;
                            font-weight: 500;
                            background-color: #67F8FF;
                            height: 30px;
                            line-height:30px;
                            overflow: hidden;
                            border-radius:20px ;
                            padding: 4px 15px;
                            flex-shrink: 0;
                            color: #004AD9;
                        } 
                    }
          
                  
                }
            }
            .star2{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width:150px;
                        margin:10px auto;
                        label{
                            font-size: 24px;
                            font-family: Poppins-Medium, Poppins;
                            font-weight: 500;
                            color:#fff;
                            margin: 0 20px 0 0;
                        }
                        i{
                            font-size: 24px;
                            color: #CCFFFF;
                        }
            }
            .shopTxt1,
            .shopTxt{
                padding: 10px 0 0 0;
                flex-shrink: 0;
                flex: 1;
                overflow: hidden;
                overflow-y: auto;
                max-height: 300px;
                .title{
                      font-size: 28px;
                       color: #fff;  
                }
                p{
                    font-size: 20px;
                    color: #ffffff50;
                    line-height: 34px;
                    font-family: Poppins-Medium, Poppins;
                    font-weight: 500;
                    padding: 5px 0 10px 20px;
                    word-wrap:break-word;
                    word-break:normal; 
                    
                }
            }
            .shopTxt1{
                display: flex;
                justify-content:space-between;
                 p{
                    color:#fff;
                    font-size:24px;
                 }
                 p.em{
                    color: #67F8FF;
                    font-size:28px;
                 }
            }

        }

        .right-shop-view{
            margin-left:30px;
            background-image:url('/images/dgbg4.png');
            background-size:100% 100%;
            height:480px;
            width:700px;
            background-repeat: no-repeat;
            background-position: center;
            margin-top:80px;
            .coupons-lq{
                background-image:url('/images/r-coupon.png');
                background-size:100% 100%;
                height:150px;
                width:200px;
                background-repeat: no-repeat;
                background-position: center;
                margin:50px auto 20px auto;
                text-align: center;
                padding:10px 0;
                .icon{
                    width:24px;
                    margin-top:20px;
                }
                .num{
                    font-size:28px;
                    color:#fff;
                }
            }
             .maxtitle{
                    font-size:38px;
                    color:#fff;
                    padding-top:10px;
                    text-align: center;
                    width:100%;
            }
            .date{
                color:#ffffff70;
                font-size:28px;
                padding-top:10px;
                text-align: center;
                    width:100%;
            }
            .btn-view{
                display: flex;
                justify-content: space-around;
                width:500px;
                align-items: center;
                align-self: center;
                margin: 20px auto;
                .btnr,
                .btn{
                   background-image:url('/images/coupon/s1.png');
                    background-size:100% 100%;
                    height:60px;
                    width:220px;
                    background-repeat: no-repeat;
                    background-position: center;
                }
                .btnr{
                    background-image:url('/images/coupon/s2.png');
                }
            }
        }
    }
    .adheader{
         padding: 15px 30px 15px 0;
        .hcon{
            display: flex;
            height: 80px;
            line-height: 80px;
            align-items: center;
            .shopLetfTop{
                padding: 0;
                font-size: 30px;
                font-weight: 500;
                b{
                    color: #82FEF4;
                }
            }
            .topSearch{
                flex: 1;
                // display: flex;
                // justify-content: end;
                .tswd{
                    float:right;
                    width: 550px;
                }
            }
        }
    }
    .left-menu{
        width:100px;
        height:100%;
        position: relative;

    }

</style>
